<template>
    <div class="flex_row_center card2 p5 ">
        <label>{{ props.name }}</label>
        <el-switch class="ml5" v-model="inputValue" @change="onChange"/>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';


interface Props {
    name: string,
    value: boolean,
}

const props = defineProps<Props>();

const inputValue = ref(false);

watch(props, () => {
    inputValue.value = props.value;
});

const emit = defineEmits<{
    (event: "change", value: boolean): void;
}>();

function onChange(value: boolean) {
    emit('change', value);
}

</script>



